<template>
  <div>
    <canvas id="canvas" width="100%" height="100%"></canvas>
    <div class="home" id="home">
      <div class="leftBox">
        <div class="leftSame">
          <div class="topTitle">设备通讯状态</div>
          <div id="myChartOne" :style="{width: '100%', height: '90%'}"></div>
        </div>
        <div class="leftSame">
          <div class="topTitle">用水时间段分析(次)</div>
          <div id="myChartTwo" :style="{width: '100%', height: '90%'}"></div>
        </div>
        <div class="leftSame lastBox">
          <div class="topTitle">重复打水周期分析 (人/次)</div>
          <div id="myChartThree" :style="{width: '100%', height: '90%'}"></div>
        </div>
      </div>
      <div class="centerBox">
        <div class="centerTitle">
          <div class="topBor"></div>
          <div class="cenBor">
            <div class="cenShow"> <img src="../../assets/top.png">
              <p>滳滳打水大数据平台</p><div class="divtext">售水设备分布图</div></div>
          </div>
          <div class="topBor">
            <audio controls='controls' hidden id="audio" ref='audio'>
              <!--  <source src="../../../static/mp3/8211.mp3" type="audio/mp3" /> -->
            </audio>
          </div>
        </div>
        <div class="atlas">
          <div id="myChartFour" :style="{width: '100%', height: '100%'}"></div>
        </div>
        <div class="conFoot">
          <div class="typeBox">
            <div class="oneBox" style="width: 18%">
              <div class="showNum" ref="waterconRef" :data-value="waterconsumption">{{waterconsumption}}</div>
              <p>累计用水量L</p>
            </div>
            <div class="oneBox">
              <div class="showNum">{{cards}}</div>
              <p>累计发卡数</p>
            </div>
            <div class="oneBox">
              <div class="showNum">{{recharge}}</div>
              <p>累计充值</p>
            </div>
            <div class="oneBox">
              <div class="showNum">{{orders}}</div>
              <p>累计订单数</p>
            </div>
            <div class="oneBox">
              <div class="showNum">{{users}}</div>
              <p>平台用户</p>
            </div>
            <div class="oneBox" style="width: 12%">
              <div class="showNum">{{perday}}</div>
              <p>日均打水次数</p>
            </div>
          </div>
          <div class="company">
            <div class="comName">
              <div class="rhombus"></div>
              <div class="rhombus twoRhom"></div>
              <img src="../../assets/clogo.png" alt=""> 重庆优合一众网络科技有限公司
              <div class="rhombu_s"></div>
              <div class="rhombu_s twoRhoms"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="rightBox">
        <div class="rightSameOne">
          <div class="topTitle">滤芯更换周期(设备数/月)</div>
          <div id="myChartFive" :style="{width: '100%', height: '90%'}"></div>
        </div>
        <div class="rightSameOne">
          <div class="topTitle">城市TDS数据(ppm)</div>
          <div id="myChartSix" :style="{width: '100%', height: '90%'}"></div>
        </div>
        <div class="rightSameOne rightSameLast lastBox">
          <div class="topTitle">售水地域分布排行</div>
          <div id="myChartSeven" :style="{width: '100%', height: '90%'}"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import china from '../../../static/china.js';
let echarts = require('echarts/lib/echarts');

export default {
  name: 'HelloWorld',
  data() {
    return {
      audio_url: '../../../static/mp3/1.mp3', //['../../../static/mp3/1.mp3', '../../../static/mp3/2.mp3', '../../../static/mp3/3.mp3'],//提示音 mp3
      websock: null, //websock
      waterconsumption: 8888,
      cards: 8888,
      recharge: 8888,
      orders: 8888,
      users: 8888,
      perday: 8888,
      getOptionChina: { //中国地图
        geo: { // 新建一个地理坐标系 geo ，
          map: 'china', //地图类型为国图
          aspectScale: 0.75, //宽高比列
          zoom: 1.22, //地图缩放比例
          itemStyle: { // 定义样式
            normal: { // 普通状态下的样式
              areaColor: '#2940F7', //new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FDFEFF' },{ offset: 1, color: '#0066FF' }]),
              borderColor: '#A5C9FC',
              areaStyle: { color: 'yellow' },
              label: {
                show: true,
                textStyle: {
                  color: '#2457A8'
                }
              }
            },
            emphasis: { // 高亮状态下的样式
              areaColor: '#A7CBFC',
              borderColor: '#fff',
            }
          },
          dispatchAction: {
            type: 'geoToggleSelect',
            dataIndex: 22
          }
        },
        // hover显示目标数据
        tooltip: {
          trigger: 'item',
          textStyle: {
            align: 'left',
            color: '#fff'
          },
        },
        series: [{
          name: '', //series名称
          type: 'scatter', //为散点类型
          coordinateSystem: 'geo', // series坐标系类型
          data: [
            { name: '海门', value: [121.15, 31.89, 1] },
            { name: '鄂尔多斯', value: [109.781327, 39.608266, 0] },
            { name: '招远', value: [120.38, 37.35, 0] },
          ],
          symbol: 'circle',
          symbolSize: [6, 6],
        }],
        // 添加视觉映射组件
        visualMap: {
          type: 'piecewise', // 分段型 continuous连续型
          splitNumber: 2, //设置为连续型方可用
          min: 0, // 值域最小值，必须参数
          max: 1600, // 值域最大值，必须参数
          calculable: false, // 是否启用值域漫游
          pieces: [
            { value: 1, label: '在线', color: '#FFF', symbol: 'circle' },
            { value: 0, label: '离线', color: '#FF0000', symbol: 'circle' },
          ],
          //点击控制 laob
          inRange: {
            symbol: 'circle',
            color: '#fff',
            // 指定数值从低到高时的颜色变化
          },
          textStyle: {
            color: ['#FFF', '#fff'] // 值域控件的文本颜色
          }
        },
      },
      getOptionPie: {
        title: {
          text: '总设备数' + 300 + '台' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + '实时在线率' + 95 + '%',
          x: 'center',
          y: 'bottom',
          padding: 20,
          textStyle: {
            fontSize: 14,
            fontWeight: 'normal',
            color: '#fff' // 主标题文字颜色
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)",
          textStyle: {
            color: '#fff',
            x: 'center',
            y: 'bottom',
          }
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          y: 'center',
          padding: 15,
          itemGap: 30,
          itemWidth: 15,
          itemHeight: 15,
          textStyle: {
            color: '#fff' // 图例文字颜色
          },
          data: ['在线', '离线']
        },
        series: [{
          name: '设备通讯状态',
          type: 'pie',
          radius: '70%',
          center: ['55%', '42%'],
          selectedOffset: 1,
          data: [
            { value: 190, name: '在线' },
            { value: 10, name: '离线' },
          ],
          itemStyle: {
            normal: {
              borderColor: '#f0f0f0',
              label: {
                show: false //不显示标记
              },
            },
            emphasis: {
              // color: 各异,
              borderColor: 'rgba(255,0,0,0)',
              borderWidth: 1,
            }
          }
        }],
        color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0, // 0% 处的颜色 
            color: '#08C9FA'
          },
          {
            offset: 1, // 100% 处的颜色
            color: '#DEE3E5'
          }
        ], false), '#6FFA4B'],
      },
      getOptionLineTime: {
        grid: {
          left: '3%',
          right: '3%',
          top: '10%',
          bottom: '5%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['0-2', '4-6', '6-10', '12-14', '14-18', '20-22', '22-24'],
          //x轴坐标颜色
          axisLine: {
            lineStyle: {
              color: '#D88CF2',
              padding: 10,
              type: 'solid',
            }
          },
          //刻度上字体样式
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: '#fff'
            }
          },
          //刻度样式
          axisTick: {
            length: 5,
            color: '#8080FF',
            lineStyle: {
              color: '#8080FF'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: { // 分隔线
            show: true, // 默认显示，属性show控制显示与否
            lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
              color: ['#D88CF2'],
              width: 1,
              type: 'dashed'
            },
          },
          scale: true,
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#0066FF'
            }
          },
          axisLabel: {
            show: true,
            margin: 4,
            verticalAlign: 'middle',
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [{
          data: [220, 600, 1700, 634, 909, 1330, 1920],
          type: 'line',
          symbol: 'diamond',
          symbolSize: 8, //标记的大小
          color: '#2DE400',
        }],
      },
      getOptionLineNext: {
        grid: {
          left: '3%',
          right: '3%',
          top: '10%',
          bottom: '5%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        //X轴
        xAxis: {
          type: 'category',
          data: ['1天', '2天', '3天', '4天', '5天', '6天', '7天'],
          //x轴坐标颜色
          axisLine: {
            lineStyle: {
              color: '#D88CF2',
              padding: 10,
              type: 'solid',
            }
          },
          //刻度上字体样式
          axisLabel: {
            show: true,
             interval: 0,
            textStyle: {
              color: '#fff'
            }
          },
          //刻度样式
          axisTick: {
            alignWithLabel: true,
            length: 5,
            color: '#8080FF',
            lineStyle: {
              color: '#8080FF'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: { // 分隔线
            show: true, // 默认显示，属性show控制显示与否
            lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
              color: ['#D88CF2'],
              width: 1,
              type: 'dashed'
            },
          },
          scale: true,
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#0066FF'
            }
          },
          axisLabel: {
            show: true,
            margin: 2,
            verticalAlign: 'middle',
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [{
          data: [120, 200, 600, 900, 709, 830, 1120],
          type: 'line',
          symbol: 'diamond',

          symbolSize: 4, //标记的大小
          color: '#2DE400',
        }],
      },
      getOptionLineFlter: {
        grid: {
          left: '3%',
          right: '3%',
          top: '10%',
          bottom: '5%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        //X轴
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
          //x轴坐标颜色
          axisLine: {
            lineStyle: {
              color: '#D88CF2',
              padding: 10,
              type: 'solid',
            }
          },
          //刻度上字体样式
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: '#fff'
            }
          },
          //刻度样式
          axisTick: {
            alignWithLabel: true,
            length: 5,
            color: '#8080FF',
            lineStyle: {
              color: '#8080FF'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: { // 分隔线
            show: true, // 默认显示，属性show控制显示与否
            lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
              color: ['#D88CF2'],
              width: 1,
              type: 'dashed'
            },
          },
          scale: true,
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#0066FF'
            }
          },
          axisLabel: {
            show: true,
            margin: 2,
            verticalAlign: 'middle',
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [{
          data: [120, 200, 600, 900, 709, 830, 1120],
          type: 'line',
          symbol: 'diamond',

          symbolSize: 4, //标记的大小
          color: '#2DE400',
        }],
      },
      getOptionBarTDS: {
        grid: {
          left: '2%',
          right: '2%',
          top: '10%',
          bottom: '5%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        //X轴
        xAxis: {
          type: 'category',
          data: ['青海','重庆', '山东','云南' , '河南', '山西', '广州', '青岛', '陕西'],
          //x轴坐标颜色
          axisLine: {
            lineStyle: {
              color: '#D88CF2',
              padding: 5,
              type: 'solid',
            }
          },
          //刻度上字体样式
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            },
            interval: 0
          },
          //刻度样式
          axisTick: {
             alignWithLabel: true,
            length: 5,
            color: '#8080FF',
            lineStyle: {
              color: '#8080FF'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: { // 分隔线
            show: true, // 默认显示，属性show控制显示与否
            lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
              color: ['#D88CF2'],
              width: 1,
              type: 'dashed'
            },
          },
          scale: true,
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#0066FF'
            }
          },
          axisLabel: {
            show: true,
            margin: 2,
            verticalAlign: 'middle',
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [{
          data: [60,120, 200,300, 600, 900, 709, 830, 1120],
          type: 'bar',
          symbol: 'diamond',
          barWidth: 10,
          symbolSize: 2, //标记的大小
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1, [
              { offset: 0, color: '#FDFEFF' },
              { offset: 1, color: '#0066FF' }
            ]
          ),
        }],
      },
      getOptionBarDistribution: {
        grid: {
          left: '3%',
          right: '3%',
          top: '3%',
          bottom: '2%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        //X轴
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          show: false,
          //x轴坐标颜色
          axisLine: {
            lineStyle: {
              color: '#D88CF2',
              padding: 10,
              type: 'solid',
            }
          },
          //刻度上字体样式
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          },
          //刻度样式
          axisTick: {
            alignWithLabel: true,
            length: 5,
            color: '#8080FF',
            lineStyle: {
              color: '#8080FF'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['重庆', '四川', '河北', '河南', '内蒙', '北京', '陕西', '山西', '山东'],
          splitLine: { // 分隔线
            show: false, // 默认显示，属性show控制显示与否
          },
          scale: true,
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#0066FF'
            }
          },
          axisLabel: {
            show: true,
            margin: 10,
            verticalAlign: 'middle',
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            alignWithLabel: false,
            length: 5,
            color: '#8080FF',
            lineStyle: {
              color: '#8080FF'
            },

          }
        },
        series: [{
          data: [3, 4, 7, 9, 10, 13, 15, 17, 22],
          type: 'bar',
          symbol: 'diamond',
          barWidth: 10,
          symbolSize: 4, //标记的大小
          color: function(params) {　 //首先定义一个数组 
            var colorList = ['#CC9933', '#CC9933', '#33FF00', '#33FF00', '#33FF00', '#33FF00', '#33CC00', '#33CC00', '#339900']
            return colorList[params.dataIndex]
          },
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示
                position: 'right', //在上方显示
                formatter: '{c}%', //显示为百分比
                textStyle: { //数值样式
                  color: '#fff',
                  fontSize: 14
                }
              }
            }
          }
        }],
      }
    }
  },
  computed: {

  },
  created: function() {
    var that = this;
    //var allW = document.body.clientWidth * 30%;
    //实时通信
    //this.initWebSocket();
  },
  mounted() {
    this.initWebSocket(); //建立实时通信
    this.changeAllData(); //创建所有canvas
    //this.newbcak(); //背景描绘
    this.allStarShow(); //全星
    //this.allStarTwo();//宇宙

  },
  methods: {
    //调用
    changeAllData() {
      this.chartChinaFun = echarts.init(document.getElementById('myChartFour'));
      this.chartChinaFun.setOption(this.getOptionChina); //初次中国地图渲染页面

      this.chartPieFun = echarts.init(document.getElementById('myChartOne'));
      this.chartPieFun.setOption(this.getOptionPie); // 饼图设备通讯状态

      this.chartLineTime = echarts.init(document.getElementById('myChartTwo'));
      this.chartLineTime.setOption(this.getOptionLineTime); // 打水时间段

      this.chartLineNext = echarts.init(document.getElementById('myChartThree'));
      this.chartLineNext.setOption(this.getOptionLineNext); // 打水次数周期

      this.chartLineFlter = echarts.init(document.getElementById('myChartFive'));
      this.chartLineFlter.setOption(this.getOptionLineFlter); // 滤芯更换周期 

      this.chartBarTDS = echarts.init(document.getElementById('myChartSix'));
      this.chartBarTDS.setOption(this.getOptionBarTDS); // 城市TDS排行

      this.chartBarDistribution = echarts.init(document.getElementById('myChartSeven'));
      this.chartBarDistribution.setOption(this.getOptionBarDistribution); // 分布排行 
    },
    //发送数据包
    threadPoxi() { //sendData
      const agentData = this.$route.query.token; //参数
      //若是ws开启状态
      if (this.websock.readyState === this.websock.OPEN) {
        this.websocketsend(agentData); //console.log('我复活了 开启');
      }
      // 若是 正在开启状态，则等待300毫秒
      else if (this.websock.readyState === this.websock.CONNECTING) {
        let that = this; // console.log('我复活了 开启')
        setTimeout(function() {
          that.websocketsend(agentData)
        }, 300);
      } else { // 若未开启 ，则等待500毫秒 console.log('挂了重连')    
        this.initWebSocket();
        let that = this; //保存当前对象this
        setTimeout(function() {
          that.websocketsend(agentData)
        }, 500);
      }
    },
    initWebSocket() { //初始化weosocket  
      const wsuri = "ws://www.sunlcx.top:8383"; //"ws://js.youheone.com:8383"; // "ws://49.4.15.48:8483";
      this.websock = new WebSocket(wsuri);
      this.websock.onopen = this.onopensss;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onclose = this.websocketclose;
    },
    onopensss(e){
      if (e.target.readyState===1) {
        this.threadPoxi(); //发送信息
      }
      console.log(e,"openss")
    },
    websocketonmessage(e) { //数据接收
      var that = this;
      var redata = JSON.parse(e.data);
      console.log(redata,"redata");
     // var dataObj = eval("(" + redata + ")");
      var dataObj = eval( redata);
      //console.log('打印的结果', dataObj);
      var command = dataObj.command;
      var data = dataObj.data;
      console.log('报错??',command);
      console.log('不是??',);
      switch (command) {
        case 'A0':
          break;
        case 'A1':
          // console.info(data);
          switch (data.type) {
            case 1:
              console.info('新订单');
              that.newmessage('新订单', '设备' + data.orderData.equipment_number + '有人打水了', 1);
              break;
            case 2:
              console.info('新充值');
              that.newmessage('新充值', data.recData.card_number + '新充值:' + data.recData.pay_money + '元', 2);
              break;
            case 3:
              if (!data.deviceSN) {
                return;
              }
              that.newmessage('设备上线', data.deviceSN + '设备上线', 3);
              break;
            case 4:
              if (!data.deviceSN) {
                return;
              }
              that.newmessage('设备离线', data.deviceSN + '设备离线', 4);
              break;
          }
          break;
        case 'A2':
          var chartChinaFunData = [
            { value: data.online, name: '在线' },
            { value: data.offline, name: '离线' },
          ];
          console.log('数据>>',chartChinaFunData);
          that.chartPieFun.setOption({
            title: { text: '总设备数' + data.total + '台' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + '实时在线率' + data.ratio + '%' },
            series: [{ data: chartChinaFunData }],
          });
          break;
        case 'A3':
          var getOptionLineTimeData = data.title;
          var getOptionLineTimeSeriesData = data.data;
          that.chartLineTime.setOption({
            xAxis: [{ data: getOptionLineTimeData }],
            series: [{ data: getOptionLineTimeSeriesData }],
          });
          break;
        case 'A4':
          var getOptionLineTimeData = data.title;
          var getOptionLineTimeSeriesData = data.data;
          that.chartLineNext.setOption({
            xAxis: [{ data: getOptionLineTimeData }],
            series: [{ data: getOptionLineTimeSeriesData }],
          });
          break;
        case 'A5':
          that.waterconsumption = data.waterconsumption;
          that.numberGrow(that.$refs.waterconRef, that.waterconsumption, data.waterconsumption);
          that.cards = data.cards;
          that.recharge = data.recharge;
          that.orders = data.orders;
          that.users = data.users;
          that.perday = data.perday;
          break;
        case 'A6':
          var getOptionLineTimeData = data.title;
          var getOptionLineTimeSeriesData = data.data;
          that.chartLineFlter.setOption({
            xAxis: [{ data: getOptionLineTimeData }],
            series: [{ data: getOptionLineTimeSeriesData }],
          });
          break;
        case 'A7':
          var getOptionLineTimeData = data.title;
          var getOptionLineTimeSeriesData = data.data;
          that.chartBarTDS.setOption({
            xAxis: [{ data: getOptionLineTimeData }],
            series: [{ data: getOptionLineTimeSeriesData }],
          });
          break;
        case 'A8':
          var getOptionLineTimeData = data.title;
          var getOptionLineTimeSeriesData = data.data;
          that.chartBarDistribution.setOption({
            yAxis: [{ data: getOptionLineTimeData }],
            series: [{ data: getOptionLineTimeSeriesData }],
          });
          break;
        case 'A9':
          var getOptionLineTimeSeriesData = data.data;
          console.log('这是??',getOptionLineTimeSeriesData);
          that.chartChinaFun.setOption({
            series: [{ data: getOptionLineTimeSeriesData }],
          });
          break;
      }


    },
    numberGrow(ele, cka, add) {
      var that = this;
      // console.log('xuyaode数据>>>',ele,cka,add);
      var current = Number(add);
      var start = Number(cka);
      var step = ((add - cka) * 10) / (3 * 1000);
      var t = setInterval(function() {
        start = Number((Number(step) + Number(start)).toFixed(3));
        if (start > add) {
          clearInterval(t)
          start = add
          t = null
        }
        if (current === start) {
          return
        }
        current = start
        //ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,');
        that.waterconsumption = current;
      }, 10)
    },
    newmessage(title, message, num) {
      var that = this;
      var icons = '',
        classs = '';
      if (num == 1) {
        icons = 'el-icon-date';
        classs = 'mains';
      } else if (num == 2) {
        icons = 'el-icon-tickets';
        classs = 'parsA';
      } else if (num == 3) {
        icons = 'el-icon-upload';
        classs = 'parsB';
      } else if (num == 4) {
        icons = 'el-icon-printer';
        classs = 'parsC';
      }
      that.$notify({
        title: title,
        message: message,
        center: true,
        iconClass: icons,
        customClass: classs,
        position: 'top-left',
        duration: 5000,
        offset: 30
      });
      //音频播放优化处理
      let audio = document.getElementById("audio");
      audio.src = that.audio_url;
      var playPromise = audio.play();
      playPromise.then(() => {
        setTimeout(() => {}, audio.duration * 1000); // audio.duration 为音频的时长单位为秒
      }).catch((e) => {
        console.log('加载失败')
      });
    },
    websocketsend(agentData) { //数据发送
      clearInterval(interval); //先清一次心跳
      var sendData = {},
        that = this;
      var datas = { token: agentData };
      sendData.command = "A0";
      sendData.data = datas;
      sendData = JSON.stringify(sendData);
      console.log('one', sendData);
      if (this.websock.readyState===1) {
        console.log('two', sendData);
        this.websock.send(sendData); //第一次景来先执行一次
        var interval = setInterval(function() { //此处循环
          //console.log('上传的数据', sendData);
          that.websock.send(sendData);
        }, 30000);
      }

    },
    websocketclose(e) { //关闭监听
      this.threadPoxi(); //重连  // console.log("哦豁 我挂掉了");
    },

    //绘制背景
    newbcak() {
      var o = document.getElementsByTagName("body")[0];
      var num = 200;
      var w = window.innerWidth;
      var h = o.offsetHeight;
      var max = 100;
      var _x = 0;
      var _y = 0;
      var _z = 150;
      var dtr = function(d) {
        return d * Math.PI / 180;
      };

      var rnd = function() {
        return Math.sin(Math.floor(Math.random() * 360) * Math.PI / 180);
      };
      var dist = function(p1, p2, p3) {
        return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + Math.pow(p2.z - p1.z, 2));
      };

      var cam = {
        obj: {
          x: _x,
          y: _y,
          z: _z
        },
        dest: {
          x: 0,
          y: 0,
          z: 1
        },
        dist: {
          x: 0,
          y: 0,
          z: 200
        },
        ang: {
          cplane: 0,
          splane: 0,
          ctheta: 0,
          stheta: 0
        },
        zoom: 1,
        disp: {
          x: w / 2,
          y: h / 2,
          z: 0
        },
        upd: function() {
          cam.dist.x = cam.dest.x - cam.obj.x;
          cam.dist.y = cam.dest.y - cam.obj.y;
          cam.dist.z = cam.dest.z - cam.obj.z;
          cam.ang.cplane = -cam.dist.z / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
          cam.ang.splane = cam.dist.x / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
          cam.ang.ctheta = Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z) / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
          cam.ang.stheta = -cam.dist.y / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
        }
      };

      var trans = {
        parts: {
          sz: function(p, sz) {
            return {
              x: p.x * sz.x,
              y: p.y * sz.y,
              z: p.z * sz.z
            };
          },
          rot: {
            x: function(p, rot) {
              return {
                x: p.x,
                y: p.y * Math.cos(dtr(rot.x)) - p.z * Math.sin(dtr(rot.x)),
                z: p.y * Math.sin(dtr(rot.x)) + p.z * Math.cos(dtr(rot.x))
              };
            },
            y: function(p, rot) {
              return {
                x: p.x * Math.cos(dtr(rot.y)) + p.z * Math.sin(dtr(rot.y)),
                y: p.y,
                z: -p.x * Math.sin(dtr(rot.y)) + p.z * Math.cos(dtr(rot.y))
              };
            },
            z: function(p, rot) {
              return {
                x: p.x * Math.cos(dtr(rot.z)) - p.y * Math.sin(dtr(rot.z)),
                y: p.x * Math.sin(dtr(rot.z)) + p.y * Math.cos(dtr(rot.z)),
                z: p.z
              };
            }
          },
          pos: function(p, pos) {
            return {
              x: p.x + pos.x,
              y: p.y + pos.y,
              z: p.z + pos.z
            };
          }
        },
        pov: {
          plane: function(p) {
            return {
              x: p.x * cam.ang.cplane + p.z * cam.ang.splane,
              y: p.y,
              z: p.x * -cam.ang.splane + p.z * cam.ang.cplane
            };
          },
          theta: function(p) {
            return {
              x: p.x,
              y: p.y * cam.ang.ctheta - p.z * cam.ang.stheta,
              z: p.y * cam.ang.stheta + p.z * cam.ang.ctheta
            };
          },
          set: function(p) {
            return {
              x: p.x - cam.obj.x,
              y: p.y - cam.obj.y,
              z: p.z - cam.obj.z
            };
          }
        },
        persp: function(p) {
          return {
            x: p.x * cam.dist.z / p.z * cam.zoom,
            y: p.y * cam.dist.z / p.z * cam.zoom,
            z: p.z * cam.zoom,
            p: cam.dist.z / p.z
          };
        },
        disp: function(p, disp) {
          return {
            x: p.x + disp.x,
            y: -p.y + disp.y,
            z: p.z + disp.z,
            p: p.p
          };
        },
        steps: function(_obj_, sz, rot, pos, disp) {
          var _args = trans.parts.sz(_obj_, sz);
          _args = trans.parts.rot.x(_args, rot);
          _args = trans.parts.rot.y(_args, rot);
          _args = trans.parts.rot.z(_args, rot);
          _args = trans.parts.pos(_args, pos);
          _args = trans.pov.plane(_args);
          _args = trans.pov.theta(_args);
          _args = trans.pov.set(_args);
          _args = trans.persp(_args);
          _args = trans.disp(_args, disp);
          return _args;
        }
      };

      (function() {
        "use strict";
        var threeD = function(param) {
          this.transIn = {};
          this.transOut = {};
          this.transIn.vtx = (param.vtx);
          this.transIn.sz = (param.sz);
          this.transIn.rot = (param.rot);
          this.transIn.pos = (param.pos);
        };

        threeD.prototype.vupd = function() {
          this.transOut = trans.steps(

            this.transIn.vtx,
            this.transIn.sz,
            this.transIn.rot,
            this.transIn.pos,
            cam.disp
          );
        };

        var Build = function() {
          this.vel = 0.04;
          this.lim = 360;
          this.diff = 200;
          this.initPos = 100;
          this.toX = _x;
          this.toY = _y;
          this.go();
        };

        Build.prototype.go = function() {
          this.canvas = document.getElementById("canvas");
          this.canvas.width = window.innerWidth;
          this.canvas.height = o.offsetHeight;
          this.$ = canvas.getContext("2d");
          this.$.globalCompositeOperation = 'source-over';
          this.varr = [];
          this.dist = [];
          this.calc = [];

          for (var i = 0, len = num; i < len; i++) {
            this.add();
          }

          this.rotObj = {
            x: 0,
            y: 0,
            z: 0
          };
          this.objSz = {
            x: w / 5,
            y: h / 5,
            z: w / 5
          };
        };

        Build.prototype.add = function() {
          this.varr.push(new threeD({
            vtx: {
              x: rnd(),
              y: rnd(),
              z: rnd()
            },
            sz: {
              x: 0,
              y: 0,
              z: 0
            },
            rot: {
              x: 20,
              y: -20,
              z: 0
            },
            pos: {
              x: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
              y: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
              z: this.diff * Math.sin(360 * Math.random() * Math.PI / 180)
            }
          }));
          this.calc.push({
            x: 360 * Math.random(),
            y: 360 * Math.random(),
            z: 360 * Math.random()
          });
        };

        Build.prototype.upd = function() {
          cam.obj.x += (this.toX - cam.obj.x) * 0.05;
          cam.obj.y += (this.toY - cam.obj.y) * 0.05;
        };

        Build.prototype.draw = function() {
          this.$.clearRect(0, 0, this.canvas.width, this.canvas.height);
          cam.upd();
          this.rotObj.x += 0.1;
          this.rotObj.y += 0.1;
          this.rotObj.z += 0.1;

          for (var i = 0; i < this.varr.length; i++) {
            for (var val in this.calc[i]) {
              if (this.calc[i].hasOwnProperty(val)) {
                this.calc[i][val] += this.vel;
                if (this.calc[i][val] > this.lim) this.calc[i][val] = 0;
              }
            }

            this.varr[i].transIn.pos = {
              x: this.diff * Math.cos(this.calc[i].x * Math.PI / 180),
              y: this.diff * Math.sin(this.calc[i].y * Math.PI / 180),
              z: this.diff * Math.sin(this.calc[i].z * Math.PI / 180)
            };
            this.varr[i].transIn.rot = this.rotObj;
            this.varr[i].transIn.sz = this.objSz;
            this.varr[i].vupd();
            if (this.varr[i].transOut.p < 0) continue;
            var g = this.$.createRadialGradient(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p, this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2);
            this.$.globalCompositeOperation = 'lighter';
            g.addColorStop(0, 'hsla(255, 255%, 255%, 1)');
            g.addColorStop(.5, 'hsla(' + (i + 2) + ',85%, 40%,1)');
            g.addColorStop(1, 'hsla(' + (i) + ',85%, 40%,.5)');
            this.$.fillStyle = g;
            this.$.beginPath();
            this.$.arc(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2, 0, Math.PI * 2, false);
            this.$.fill();
            this.$.closePath();
          }
        };
        Build.prototype.anim = function() {
          window.requestAnimationFrame = (function() {
            return window.requestAnimationFrame ||
              function(callback, element) {
                window.setTimeout(callback, 1000 / 60);
              };
          })();
          var anim = function() {
            this.upd();
            this.draw();
            window.requestAnimationFrame(anim);
          }.bind(this);
          window.requestAnimationFrame(anim);
        };

        Build.prototype.run = function() {
          this.anim();

          window.addEventListener('mousemove', function(e) {
            this.toX = (e.clientX - this.canvas.width / 2) * -0.8;
            this.toY = (e.clientY - this.canvas.height / 2) * 0.8;
          }.bind(this));
          window.addEventListener('touchmove', function(e) {
            e.preventDefault();
            this.toX = (e.touches[0].clientX - this.canvas.width / 2) * -0.8;
            this.toY = (e.touches[0].clientY - this.canvas.height / 2) * 0.8;
          }.bind(this));
          window.addEventListener('mousedown', function(e) {
            for (var i = 0; i < 100; i++) {
              this.add();
            }
          }.bind(this));
          window.addEventListener('touchstart', function(e) {
            e.preventDefault();
            for (var i = 0; i < 100; i++) {
              this.add();
            }
          }.bind(this));
        };
        var app = new Build();
        app.run();
      })();
      window.addEventListener('resize', function() {
        canvas.width = w = window.innerWidth;
        canvas.height = h = window.innerHeight;
      }, false);
    },
    allStarShow() {
      var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d'),
        w = canvas.width = window.innerWidth,
        h = canvas.height = window.innerHeight,

        hue = 217,
        stars = [],
        count = 0,
        maxStars = 1200;
      var canvas2 = document.createElement('canvas'),
        ctx2 = canvas2.getContext('2d');
      canvas2.width = 100;
      canvas2.height = 100;
      var half = canvas2.width / 2,
        gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
      gradient2.addColorStop(0.025, '#fff');
      gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
      gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
      gradient2.addColorStop(1, 'transparent');
      ctx2.fillStyle = gradient2;
      ctx2.beginPath();
      ctx2.arc(half, half, half, 0, Math.PI * 2);
      ctx2.fill();
      // End cache
      function random(min, max) {
        if (arguments.length < 2) {
          max = min;
          min = 0;
        }

        if (min > max) {
          var hold = max;
          max = min;
          min = hold;
        }

        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      function maxOrbit(x, y) {
        var max = Math.max(x, y),
          diameter = Math.round(Math.sqrt(max * max + max * max));
        return diameter / 2;
      }
      var Star = function() {
        this.orbitRadius = random(maxOrbit(w, h));
        this.radius = random(60, this.orbitRadius) / 12;
        this.orbitX = w / 2;
        this.orbitY = h / 2;
        this.timePassed = random(0, maxStars);
        this.speed = random(this.orbitRadius) / 900000;
        this.alpha = random(2, 10) / 10;
        count++;
        stars[count] = this;
      }

      Star.prototype.draw = function() {
        var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
          y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
          twinkle = random(10);

        if (twinkle === 1 && this.alpha > 0) {
          this.alpha -= 0.05;
        } else if (twinkle === 2 && this.alpha < 1) {
          this.alpha += 0.05;
        }

        ctx.globalAlpha = this.alpha;
        ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
        this.timePassed += this.speed;
      }
      for (var i = 0; i < maxStars; i++) {
        new Star();
      }

      function animation() {
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 0.9;
        ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
        ctx.fillRect(0, 0, w, h)

        ctx.globalCompositeOperation = 'lighter';
        for (var i = 1, l = stars.length; i < l; i++) {
          stars[i].draw();
        };

        window.requestAnimationFrame(animation);
      }
      animation();
    },
    allStarTwo() {
      var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d'),
        w = canvas.width = window.innerWidth,
        h = canvas.height = window.innerHeight,

        hue = 217,
        stars = [],
        count = 0,
        maxStars = 1400;
      // Thanks @jackrugile for the performance tip! http://codepen.io/jackrugile/pen/BjBGoM
      // Cache gradient
      var canvas2 = document.createElement('canvas'),
        ctx2 = canvas2.getContext('2d');
      canvas2.width = 100;
      canvas2.height = 100;
      var half = canvas2.width / 2,
        gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
      gradient2.addColorStop(0.025, '#fff');
      gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
      gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
      gradient2.addColorStop(1, 'transparent');

      ctx2.fillStyle = gradient2;
      ctx2.beginPath();
      ctx2.arc(half, half, half, 0, Math.PI * 2);
      ctx2.fill();

      // End cache

      function random(min, max) {
        if (arguments.length < 2) {
          max = min;
          min = 0;
        }

        if (min > max) {
          var hold = max;
          max = min;
          min = hold;
        }

        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      var Star = function() {

        this.orbitRadius = random(w / 2 - 50);
        this.radius = random(100, this.orbitRadius) / 10;
        this.orbitX = w / 2;
        this.orbitY = h / 2;
        this.timePassed = random(0, maxStars);
        this.speed = random(this.orbitRadius) / 900000;
        this.alpha = random(2, 10) / 10;

        count++;
        stars[count] = this;
      }

      Star.prototype.draw = function() {
        var x = Math.sin(this.timePassed + 1) * this.orbitRadius + this.orbitX,
          y = Math.cos(this.timePassed) * this.orbitRadius / 2 + this.orbitY,
          twinkle = random(10);

        if (twinkle === 1 && this.alpha > 0) {
          this.alpha -= 0.05;
        } else if (twinkle === 2 && this.alpha < 1) {
          this.alpha += 0.05;
        }

        ctx.globalAlpha = this.alpha;
        ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
        this.timePassed += this.speed;
      }

      for (var i = 0; i < maxStars; i++) {
        new Star();
      }

      function animation() {
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 0.8;
        ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
        ctx.fillRect(0, 0, w, h)

        ctx.globalCompositeOperation = 'lighter';
        for (var i = 1, l = stars.length; i < l; i++) {
          stars[i].draw();
        };

        window.requestAnimationFrame(animation);
      }

      animation();
    }

  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.el-notification .el-icon-success {
  /*修改弹窗样式*/
  color: #2881FC;
  /*  opacity: 1!important;*/
}

.mains {
  color: #2881FC;
}

.parsA {
  color: #6FFA4B;
}

.parsB {
  color: #1FF7EA;
}

.parsC {
  color: #D592F0;
}

.el-notification.left {
  left: 23%;
  /* opacity: 1!important;*/
}

.el-notification__title {
  color: #fff;
  font-size: 14px;
}

.el-notification {
  background: rgba(255, 255, 255, 0.3);
  padding: 10px 26px 10px 9px;
  width: 12%;
  transition: opacity .5s, transform .5s, left .5s, right .5s, top .5s, bottom .5s, -webkit-transform .5s;
  border: 1px solid #4D4D4D;
}

.el-notification__content {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #cfcfd2;
}

.el-notification__closeBtn {
  /* 关闭按钮*/
  top: 10px;
  right: 9px;
  color: #fff;
}

.el-notification__closeBtn:hover {
  /*结束*/
  color: #2881FC;
}

#canvas {
  background-image: -webkit-radial-gradient(ellipse farthest-corner at center top, #000d4d 0%, #000105 100%);
  background-image: radial-gradient(ellipse farthest-corner at center top, #000d4d 0%, #000105 100%);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#home {
  width: 100%;
  height: 100vh;
  /*  background-image: -webkit-radial-gradient(ellipse farthest-corner at center top, #000d4d 0%, #000105 100%);
  background-image: radial-gradient(ellipse farthest-corner at center top, #000d4d 0%, #000105 100%);*/
  cursor: pointer;
  font-size: 16px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 10;
}

#home .leftBox {
  /*左边*/
  /*  position: relative;
  background: #000000;
  z-index: 4000;*/
  display: flex;
  align-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 1% 0% 1% 1.5%;
  width: 20%;
  height: 98%;
}

#home .lastBox {
  margin-bottom: 20px;
}

.leftSame {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  border: 1px solid #740F95;
  border-image: -webkit-linear-gradient(#740F95, #D693F0) 1 1;
  border-image: -moz-linear-gradient(#740F95, #D693F0) 1 1;
  border-image: linear-gradient(#740F95, #D693F0) 1 1;
  border-bottom: 1px solid #740F95!important;
  width: 100%;
  height: 28%;
}

.leftSame .topTitle {
  position: relative;
  top: -1px;
  width: 100%;
  height: 10%;
  background: linear-gradient(90deg, #2881FC 40%, #7CB0FF, #fff);
  color: #fff;
  font-size: 14px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-indent: 12px;
}

#home .rightBox {
  /*右边*/
  /*position: relative;
  background: #000000;
  z-index: 4000;*/
  display: flex;
  align-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 1% 1.5% 1% 0%;
  width: 20%;
  height: 98%;
}

.rightSameOne {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  border: 1px solid #740F95;
  border-image: -webkit-linear-gradient(#740F95, #D693F0) 1 1;
  border-image: -moz-linear-gradient(#740F95, #D693F0) 1 1;
  border-image: linear-gradient(#740F95, #D693F0) 1 1;
  border-bottom: 1px solid #740F95!important;
  width: 100%;
  height: 26%;
}

.rightSameLast {
  height: 35%;
}

.rightSameOne .topTitle {
  position: relative;
  top: -1px;
  width: 100%;
  height: 10%;
  background: linear-gradient(90deg, #2881FC 40%, #7CB0FF, #fff);
  color: #fff;
  font-size: 14px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-indent: 12px;
}

.centerBox {
  /*中间盒子*/
  width: 57%;
  height: 98%;
  padding: 1% 0%;
}

.centerTitle {
  width: 100%;
  height: 10%;
  display: flex;
}

.topBor {
  width: 25%;
  border-top: 2px solid #39D2F8;
}

.cenBor {
  width: 50%;
  box-sizing: border-box;
  display: block;
}

.cenShow {
  width: 100%;
  height: 100%;
  position: relative;
  font-size: 20px;
  line-height: 28px;
  text-align: center;
  box-sizing: border-box;
}

.cenShow p {
  margin: 0;
  padding: 0;
  font-size: 32px;
  line-height: 38px;
  background: linear-gradient(to right, #1F12FC, #40FFFC);
 -webkit-background-clip: text;
  color: transparent;
}
.divtext{
  margin-top: 2.5%;
  color:#fff;
}

.cenShow img {
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.atlas {
  /*地图标点*/
  width: 96%;
  height: 68%;
  margin: 0 2%;
  /* background: yellow;*/
}

.conFoot {
  /*中间底部*/
  position: relative;
  height: 18%;
  width: 96%;
  margin: 0px 2%;
/*  display: flex;
  align-items: center;
  justify-content:center;
  flex-direction: column;
  align-content: space-between;*/
}

.typeBox {
  margin-top: 1.5%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #33CC00;
}

.oneBox {
  width: 15%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.showNum {
  font-size: 28px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  width: 100%;
  border: 1px solid #33CB01;
  border-image: -webkit-linear-gradient(90deg, #33CB01, #0207F7) 1 1;
  border-image: -moz-linear-gradient(90deg, #33CB01, #0207F7) 1 1;
  border-image: linear-gradient(90deg, #33CB01, #0207F7) 1 1;
}

.oneBox p {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 30px;
}

.company {
  position: absolute;
  bottom: 0px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.comName {
  position: relative;
  bottom: 0px;
  width: 80%;
  height: 46px;
  border: 4px solid #0000CC;
  background: linear-gradient(to right, #2868E8, #FFF);
  -webkit-background-clip: text;
  color: transparent;
  line-height: 46px;
  text-align: center;
  font-size: 22px;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

.comName img {
  display: block;
  margin-right: 15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.comName .rhombus {
  position: absolute;
  top:0px;
  left: -13px;
  transform: skewX(30deg);
  -ms-transform: skewX(30deg);
  -moz-transform: skewX(30deg);
  -webkit-transform: skewX(30deg);
  -o-transform: skewX(30deg);
  display: flex;
  width: 20px;
  height: 44px;
  margin-left: 25px;
  border: 2px solid #000099;
  border-bottom: 2px solid #0000CC;
  border-top: 2px solid #0000CC;
}

.twoRhom {
  left: 9px!important;
}

.rhombu_s {
  position: absolute;
  top:0px;
  right: 13px;
  transform: skewX(-30deg);
  -ms-transform: skewX(-30deg);
  -moz-transform: skewX(-30deg);
  -webkit-transform: skewX(-30deg);
  -o-transform: skewX(-30deg);
  display: flex;
  width: 20px;
  height: 44px;
  margin-left: 25px;
  border: 2px solid #000099;
  border-bottom: 2px solid #0000CC;
  border-top: 2px solid #0000CC;
}

.twoRhoms {
  right: 35px!important;
}

</style>
